<template>
	<!-- <view class="pr-16 pl-4">
		<u-tabs class="cate-tab" :list="tabList"  :lineColor="lineBg" :current='current'
		  :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"  @click="changeTab" :lineWidth="0" :lineHeight="2" >
		  <w-icon slot="right" name="more-cate" class="ml-8" size="16" @click="toManager"></w-icon>
		</u-tabs>
	</view> -->
	<view class="tabs-box">
		<view @click="changeTab(item)" v-for="(item,index) in tabList" :key="item.id" :class="current == index?'bg-color-active font-color-white':''" class="item-box text-overflow-2 flex flex-ai-center flex-js-center">
			{{ item.name }} 
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {OssUrl} from '@/config/index.js'
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			goodsType: Number,
			lineBg: {
				type: String,
				default: () => {
					let imgUrl =`${OssUrl}/static/bg/vector.png`
					return `url(${imgUrl}) 100% 100%`
				}
			},
		},
		data() {
			return {
				activeStyle: {
					color:'#fff',
					fontWeight:'bold',
					fontSize:'24rpx',
					background:'#EA1F15',
					padding:'10rpx 30rpx',
					borderRadius: '6rpx',
				},
				inactiveStyle: {
					color: '#666',
					fontSize: '24rpx',
					background:'#eee',
					padding:'10rpx 30rpx',
					borderRadius: '6rpx',
				},
				
				baseList: []
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		computed: {
			...mapState('goods', ['collectionSeries']),
			tabList() {
				return this.collectionSeries.map(v => {
					return {
						id: v.series_id,
						name: this.handleLang(v.series_name),
						is_def: v.is_def
					}
				})
			},
			current() {
				return this.tabList.findIndex(v => v.id === this.value)
			},
		},
		watch: {
			collectionSeries: {
				deep: true,
				immediate: true,
				handler(v) {
					let hasDef = this.tabList.find(v => v.is_def)
					console.log(hasDef)
					if (hasDef) {
						this.changeTab(hasDef)
					}
				},
				lang(){
					this.tabList()
				}
			}
		},
		mounted() {
			this.getSeries()
		},
		methods: {
			...mapActions('goods', ['getSeries']),
			changeTab({
				id
			}) {
				this.$emit('change', id)
			},
			toManager() {
				uni.navigateTo({
					url: '/pages/market/categoryManager?type=' + (this.goodsType == 1 ? 20 : 10)
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	
	.tabs-box {
		width: 15%;
		// background-color: aqua;
		.item-box {
			width: 100%;
			min-height:70rpx;
			// background-color: #eee;
			font-size: 24rpx;
			padding: 8rpx;
		}
	}
	.bg-color-active {
		background-color: #EA1F15 !important;
		border-radius: 0 12rpx 12rpx 0;
	}
	
</style>